<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <style type="text/css">
        #main{
            width: 650px;
            height: 640px;

        }
        #app {
            width: 810px;
            height: 440px;
        }

        .div1 {

            width: 400px;
            float: left;
            height: 440px;
        }

        #div2 {
            width: 1000px;
            height: 200px;
            border-top:1px solid lightgrey ;
            display: none;
        }
        fieldset{
            border: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="app">
        <el-divider><i class="el-icon-mobile-phone"></i>添加商品信息</el-divider>
        <el-form :model="goodsInfo" status-icon :rules="rules" ref="goodsInfo" label-width="100px"
                 class="demo-ruleForm">
            <div class="div1">
                <el-form-item label="商品名称" prop="gname">
                    <el-input style="width: 200px;" v-model="goodsInfo.gname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品编码" prop="code">
                    <el-input style="width: 200px;" readonly="readonly" v-model="goodsInfo.code" autocomplete="off"></el-input>
                    <el-button @click="addCode()">生成商品编码</el-button>
                </el-form-item>
                <el-form-item label="商品分类" prop="cid">
                    <el-select v-model="goodsInfo.cid" placeholder="请选择商品类别">
                        <el-option v-for="(c,i) in categoryArr" :label="c.category" :value="c.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品规格" prop="gsid">
                    <el-select v-model="goodsInfo.gsid" placeholder="请选择商品规格">
                        <el-option v-for="(s,i) in specArr" :label="s.stype" :value="s.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品品牌" prop="gbid">
                    <el-select v-model="goodsInfo.gbid" placeholder="请选择商品品牌">
                        <el-option v-for="(b,i) in brandArr" :label="b.btype" :value="b.id"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div class="div1">
                <el-form-item label="商品等级" prop="ggid">
                    <el-select v-model="goodsInfo.ggid" placeholder="请选择商品等级">
                        <el-option v-for="(g,i) in gradeArr" :label="g.gtype" :value="g.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品储藏方式" prop="gdid">
                    <el-select v-model="goodsInfo.gdid" placeholder="请选择商品储藏方式">
                        <el-option v-for="(d,i) in depositArr" :label="d.state" :value="d.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="最低价格" prop="minprice">
                    <el-input style="width: 200px;" v-model="goodsInfo.minprice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="最高价格" prop="maxprice">
                    <el-input style="width: 200px;" v-model="goodsInfo.maxprice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品描述" prop="description">
                    <el-input type="textarea" v-model="goodsInfo.description"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addGoodsInfo()">确定</el-button>
                    <el-button @click="clear()">重置</el-button>
                    <!--<input readonly="readonly" v-on:focus="addPic()" placeholder="点击添加商品图片"/>-->
                    <!--<el-button @click="addPic()">添加图片</el-button>-->
                    <!--<el-button @click="addPic()">添加图片</el-button>-->
                </el-form-item>
            </div>
        </el-form>
    </div>

    <div id="div2">
        <div style="float: left; color: #65676b;">
            <fieldset>
                <legend>添加商品图片</legend>
                <form id="bar" enctype="multipart/form-data">
                    <p>
                        商品图片：<img  src="" style="width: 100px;height: 100px;"  id="haha"/>
                        <input name="pic" type="file" id="pic"/>
                    </p>
                </form>
            </fieldset>
        </div>

        <!--按钮在表单的外面-->
        <div style="width: 400px; margin-top: 120px; float: left;">
            <button style="width: 70px; height: 40px; background-color: #409eff;border-radius: 6px;" id="foo">提交</button>
            <button style="width: 70px; height: 40px; background-color: #ffffff;border-radius: 6px;" id="cancelMain">返回</button>
        </div>
    </div>
</div>

<script>
    $.get("/cai/goods/listCategory",function (backData) {
        app.categoryArr = backData.data;
    });
    $.get("/cai/goods/listSpec",function (backData) {
        app.specArr = backData.data;
    });
    $.get("/cai/goods/listBrand",function (backData) {
        app.brandArr = backData.data;
    });
    $.get("/cai/goods/listGrade",function (backData) {
        app.gradeArr = backData.data;
    });
    $.get("/cai/goods/listDeposit",function (backData) {
        app.depositArr = backData.data;
    })
    var app = new Vue({
        el: "#app",
        data: {
            categoryArr:[],
            specArr:[],
            brandArr:[],
            gradeArr:[],
            depositArr:[],
            goodsInfo:{},
            rules: {
                gname:[
                    { required: true, message: '请输入商品名称', trigger: 'blur' }
                ],
                code:[
                    { required: true, message: '请填入商品编码', trigger: 'blur' }
                ],
                cid:[
                    { required: true, message: '请选择商品分类', trigger: 'blur' }
                ]
            }
        },
        methods: {
            clear:function(){
                app.$refs["goodsInfo"].resetFields();
            },
            addCode:function(){
                $.get("/cai/goods/code",function (backData) {
                    app.goodsInfo.code = backData.data;
                })
            },
            addGoodsInfo:function () {
                app.$refs["goodsInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/goods/addOneGoods",app.goodsInfo,function (backData) {
                            if(backData.code == 1){
                                app.$notify({
                                    title: '成功提示',
                                    message: backData.msg,
                                    type: 'success'
                                });
                                document.getElementById("div2").style.display = "block";
                            }else {
                                app.$notify.error({
                                    title: '错误提示',
                                    message: backData.msg
                                });
                            }
                        });
                    }
                });
            },
            /*addPic:function(){
                document.getElementById("div2").style.display = "block";
            }*/
        }
    });

    pic.onchange=function(){
        var r=new FileReader();
        r.readAsDataURL(pic.files[0]);
        r.onload=function(){
            haha.src=r.result;
        }
    };
    foo.onclick=function(){

        var goodsData=new FormData(bar);

        $.ajax({
            url: "/cai/goods/uploadGoods",
            type: "POST",
            data: goodsData,
            processData: false,
            contentType: false,
            success: function(data) {
                if(data.code == 1){
                    app.$notify({
                        title: '成功提示',
                        message: data.msg,
                        type: 'success'
                    });
                }else {
                    app.$notify.error({
                        title: '错误提示',
                        message: data.msg
                    });
                }
            }
        });
    }
    cancelMain.onclick = function(){
        window.location.href = "/cai/allGoods.html";
    }

</script>
</body>
</html>
